<template>
  <view>
    <!-- 搜索框 -->
    <Yg-search></Yg-search>

    <!-- tabs 标签 -->
    <u-tabs
      :list="tabs"
      :current="current"
      :scrollable="false"
      @click="click"
    ></u-tabs>

    <view>
      <view v-if="current === 0">
        <view class="goods-item" v-for="item in goods" :key="item.goods_id">
          <view class="goods-item-img">
            <image :src="item.goods_small_logo"></image>
          </view>
          <view class="goods-item-info">
            <view class="goods-name u-line-2">{{ item.goods_name }}</view>
            <view class="goods-price">￥{{ item.goods_price }}</view>
          </view>
        </view>
      </view>
      <view v-else-if="current === 1">销量</view>
      <view v-else-if="current === 2">价格</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [{ name: "综合" }, { name: "销量" }, { name: "价格" }],
      current: 0, //tabs 标签 默认选中综合

      goods: [], // 商品列表
    };
  },
  async onLoad({ cid }) {
    const res = await uni.$u.http.get("/goods/search", { params: { cid } });
    this.goods = res.message.goods;
  },
  methods: {
    click({ index }) {
      this.current = index;
    },
  },
};
</script>

<style lang="scss">
.u-tabs__wrapper__nav__line {
  background-color: red !important;
}
.goods-item {
  display: flex;
  margin-top: 10rpx;
  .goods-item-img {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 192rpx;
      height: 191rpx;
      background-color: #ccc;
    }
  }

  .goods-item-info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 28rpx;
    color: #666;
    flex: 2;
    // .goods-name {
    // }

    .goods-price {
      color: #eb4450;
    }
  }
}
</style>